* {
    margin: 0;
    padding: 0;
}
body {
    min-width: 1200px;
    -webkit-app-region: drag; 
}
body a,
body i,
body span,
body img {
    -webkit-app-region: no-drag;
}
html,body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 500;
    font-family: '微软雅黑', '宋体', '楷体', 'Arial Narrow', Arial, sans-serif;
}
h1,h2,h3,h4,h5 {
    font-weight: normal;
}
i,em {
    font-style: normal;
}
li,ol,dl {
    margin: 0;
    list-style: none;
}
a {
    text-decoration: none;
    color: @c-333;
    :active {
        color: @c-333;
    }
}
ul,ol {
    margin: 0;
    padding: 0;
}
.flexbox-h {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.flexbox-v {
    display: flex;
    flex-direction: column;
    // align-items: center;
}
.align-c {
    align-items: center;
}
.align-s {
    align-items: flex-start;
}
.just-s {
    justify-content: flex-start;
}
.just-b {
    justify-content: space-between;
}
.just-a {
    justify-content: space-around;
}
.just-c {
    justify-content: center;
}
.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}
.flex-3 {
    flex: 3;
}
.flex-4 {
    flex: 4;
}
.tl {text-align: left;}
.tc {text-align: center;}
.tr {text-align: right;}
.fl {float: left;}
.fr {float: right;}
.clearfix::before,
.clearfix::after {
    content: '';
    height: 0;
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
}
.line-one {
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    overflow: hidden;
}
.line-two {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}
.line-three {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}
.line-four {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical
}
input {
    font-size: 12px;
    outline: none;
    height: 22px;
    width: 200px;
    border: none;
    color: @c-999;
    padding: 0 10px;
    &:focus {
        border: none;
    }
}
button {
    &:focus {
        outline: none;
    }
}
img {
    height: 100%;
    vertical-align: middle;
}
.red {
    color: @primary;
}
.bd-red {
    border: 1px solid @primary;
}
.font12 {
    font-size: 12px;
}
.font14 {
    font-size: 14px;
}
.font16 {
    font-size: 16px;
}
.font18 {
    font-size: 18px;
}
/* Thin Scrollbar */
:root{
    scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
    scrollbar-width: thin !important;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 8px;  /*滚动条宽度*/
    height: 8px;  /*滚动条高度*/
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  /*滚动条的背景区域的圆角*/
    background-color: transparent;/*滚动条的背景颜色*/  
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  /*滚动条的圆角*/
    // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: @c-ddd;  /*滚动条的背景颜色*/
}
input::-webkit-input-placeholder { 
    color:@c-ccc;text-align: left; 
    font-family: '微软雅黑', '楷体', '宋体', 'Arial Narrow', Arial, sans-serif;
}
input::-moz-placeholder { color:@c-ccc; text-align: left;font-family: '微软雅黑', '楷体', '宋体', 'Arial Narrow', Arial, sans-serif;} /* firefox 19+ */
input:-ms-input-placeholder { color:@c-ccc;text-align: left;font-family: '微软雅黑', '楷体', '宋体', 'Arial Narrow', Arial, sans-serif; } /* Internet Explorer 10+ */
input:-moz-placeholder { color:@c-ccc; text-align: left;font-family: '微软雅黑', '楷体', '宋体', 'Arial Narrow', Arial, sans-serif;} /* firefox 14-18 */


.loading-dialog {
    // position: absolute;
    // top: 0;
    // left: 0;
    // height: 100%;
    // width: 100%;
    // z-index: 99999;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin: 20px 0;
    // background-color: rgba(255, 255, 255, 0.9);
    .loading-text {
        text-align: center;
        font-size: 14px;
        line-height: 22px;
        color: @c-666;
    }
}
.spinner {
    // margin: 100px auto;
    flex-basis: 40px;
    height: 15px;
    text-align: center;
    font-size: 10px;
}

.spinner > div {
background-color: @primary;
height: 100%;
width: 2px;
margin: 0 1px;
display: inline-block;
    
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}

.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
    
.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
    
@-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}
.cloud_music {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    &.theme{
        .music-box {
            .header,.aside,.footer{
                background-color: rgba(0, 0, 0, 0.7) !important;
            }
            .aside {
                .music-info {
                    color: @c-ccc;
                    span:after {
                        color: @c-ccc;
                    }
                    &:hover {
                        color: @white;
                        span:after {
                            color: @white;
                        }
                    }
                }
            }
            .aside-item {
                .title {
                    color: @c-ccc;
                    .icon:after {
                        color: @c-ccc;
                    }
                    &:hover {
                        color: @white;
                        .icon:after {
                            color: @white;
                        }
                    }
                }
                .list-item {
                    .name, .icon:after {
                        color: @c-ccc;
                    }
                    &:hover .name, &:hover .icon:after {
                        color: @white;
                    }
                    &.active {
                        &:hover .name, &:hover .icon:after {
                            color: @c-666;
                        }
                    }
                }
            }
            .footer {
                border-top-color: transparent;
                .play-btn,.progress,.others,.volume  {
                    i,i:after,i:before {
                        color: @white !important;
                        border-color: @white !important;
                    }
                }
                .progress {
                    color: @white;
                }
            }
        }
    }
}